<!--
 * @Descripttion: 
 * @version: 
 * @Author: 冉勇
 * @Date: 2021-09-01 17:46:46
 * @LastEditTime: 2021-09-01 23:23:16
-->
<template>
    <!-- 右侧设置区域 -->
    <div class="setting" @mouseenter="id_name = true" @mouseleave="id_name = false" @click="drawer = true">
        <i class="el-icon-setting" :id="id_name ? 'setting_icon_enter' : 'setting_icon'"></i>
    </div>
    <!-- 设置内容区域 -->
    <el-drawer v-model="drawer" size="250px" :with-header="false">
        <el-divider content-position="center">
            <p style="font-size: 30px">
                <span v-html="$unit.config.setting_title"></span>
                <span style="color: #f1c40f; font-size: 10px">{{
              $unit.config.unit_version
            }}</span>
            </p>
        </el-divider>
        <div>
            <el-form ref="form" :model="config_from" label-width="80px">
                <el-form-item label="主题">
                    <el-radio-group v-model="config_from.theme">
                        <el-radio v-for="(th, index) in theme_data" :key="index" :label="th.link">
                            {{ th.name }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="save_setting()">保存设置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-drawer>
</template>

<script>
export default {
    data() {
        return {
            id_name: false,
            drawer: false,
            config_from: {
                theme: "",
            },
            theme_data: [{
                    name: "unit",
                    link: "./style/unit/index.css",
                },
                {
                    name: "element",
                    link: "./style/defult/index.css",
                },
            ],
        };
    },
    methods: {
        save_setting() {
            this.$message.success("保存设置成功");
            sessionStorage.setItem("theme", this.config_from.theme);
            var css_href = document.getElementById("unit_theme");
            css_href.href = sessionStorage.getItem("theme");
            this.drawer = false;
        },
    },
    watch: {
        drawer() {
            if (sessionStorage.getItem("theme") != null) {
                for (let index = 0; index < this.theme_data.length; index++) {
                    if (this.theme_data[index].link == sessionStorage.getItem("theme")) {
                        this.config_from.theme = this.theme_data[index].link;
                    }
                }
            } else {
                this.config_from.theme = "./style/unit/index.css";
            }
        },
    },
};
</script>